import React, { Component } from 'react'
import {
  Dimensions,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
} from 'react-native'

export default class index extends Component {
  render() {
    return (
      <View style={[styles.container]}>
        <View style={[styles.box]}>
          <View style={[styles.item]}>
            <Text style={[styles.text]}>手机充值</Text>
          </View>
          <View style={[styles.item]}>
            <Text style={[styles.text]}>生活缴费</Text>
          </View>
          <View style={[styles.item]}>
            <Text style={[styles.text]}>城市服务</Text>
          </View>
          <View style={[styles.item]}>
            <Text style={[styles.text]}>出行服务</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee'
  },
  box: {
    flexDirection: 'row',
    flexWrap: 'wrap', // wrap/wrap-reverse
  },
  item: {
    width: Dimensions.get('window').width / 3,
    height: 85,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#5e7ce0',
    color: '#fff'
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff'
  }
})
